body {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
  flex-direction: column;
}
.main {
  width: 20em;
  height: 20em;
  border-radius: 20%;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}
.clock {
  background: #fff
    url(https://cssanimation.rocks/images/posts/clocks/ios_clock.svg) no-repeat
    center;
  background-size: 88%;
  position: relative;
  border-radius: 50%;
  width: 90%;
  height: 90%;
}

.clock::after {
  background: #f00;
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3%;
  height: 3%;
  border-radius: 50%;
  z-index: 11;
}

.minutes-container,
.hours-container,
.seconds-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.hours {
  background: #333;
  height: 20%;
  left: 49%;
  position: absolute;
  top: 30%;
  transform-origin: 50% 100%;
  width: 2.5%;
  border-radius: 6.5px;
}

.minutes {
  background: #444;
  height: 38%;
  left: 49%;
  position: absolute;
  top: 12%;
  transform-origin: 50% 100%;
  width: 2%;
  border-radius: 6.5px;
}

.seconds {
  background: #f00;
  height: 50%;
  left: 49.5%;
  position: absolute;
  transform-origin: 50% 90%;
  top:5%;
  width: 1%;
  border-radius: 3.5px;
  z-index: 8;
}

@keyframes rotate {
  100% {
    transform: rotateZ(360deg);
  }
}

.hours-container {
  animation: rotate 43200s infinite linear;
}
.minutes-container {
  animation: rotate 3600s infinite linear;
}
.seconds-container {
  animation: rotate 60s infinite steps(60);
}
